<template>
  <div class="about">
    <!-- <input type="text" v-model="" @keydown.enter="add" /> -->
    <!-- <el-container> -->
    <el-input
      v-model="title"
      placeholder="请输入内容"
      @keydown.enter.native="add"
    ></el-input>
    <el-table
      ref="multipleTable"
      :data="setView"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @select="statusChange"
      @select-all="changeAll"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="" label="正在进行">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            size="mini"
            class="btn-close"
            type="primary"
            icon="el-icon-close"
            circle
            @click="del(scope.$index)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <span>{{ $store.getters.num1 }}条剩余</span>
      <el-radio-group size="small" v-model="radio1" @change="changeList">
        <el-radio-button class="btn-radio" label="全部"></el-radio-button>
        <el-radio-button class="btn-radio" label="未完成"></el-radio-button>
        <el-radio-button class="btn-radio" label="已完成"></el-radio-button>
      </el-radio-group>
      <el-button @click="delAll">清除已完成</el-button>
    </div>
    
  </div>
</template>
<script>
import {mapState,mapGetters} from"vuex"
export default {
  data() {
    return {
      title: "",
      result: [],
      radio1: "全部",
    };
  },
  computed:{
    ...mapState(["todo"]),
    ...mapGetters(["setView"])
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val);
      this.result = val;
    },
    add() {
      if (this.title == "") {
       return  this.$message.warning('不能为空喔！')
      }
      this.$store.commit("add", { title: this.title, done: false });
      this.title = "";
    },
    del(index) {
      this.$store.commit("del", index);
    },
    delAll() {
      this.$store.commit("clean");
    },
    statusChange(val, row) {
      const param = {
        id: row.id,
        // 点击后状态取反
        status: !row.done,
      };
      this.$store.commit("statusChange", param);
    },
    changeAll(val) {
      if (val.length !== 0) {
        this.$store.commit("changeStatusAll");
      } else {
        this.$store.commit("cleanStatusAll");
      }
    },
    changeList(key) {
      this.$store.commit("changeView", key);
    },
    checked() {
      this.$nextTick(() => {
        this.todo.forEach((row) => {
          console.log(row);
          this.$refs.multipleTable.toggleRowSelection(row, row.done);
        });
      });
    },
  },

  watch: {
    setView: function(val){
      console.log(val);
      console.log(this);
      this.checked()
    }
  },
};
</script>
<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}
</style>
